<template>
  <view class="container">
    <!-- 顶部支付信息 -->
    <view class="header">
      <view class="back-arrow">
        <image src="/static/icons/back.png" mode="widthFix"></image>
      </view>
      <view class="header-content">
        <view class="title">支付收银台</view>
        <view class="merchant">{{shopname}}</view>
        <view class="amount">¥{{Number(total).toFixed(2)}}元</view>
        <view class="time-remaining">剩余支付时间：{{ remainingTime }}</view>
      </view>
    </view>

    <!-- 支付方式选择 -->
    <view class="payment-methods">
      <view class="payment-option">
        <view class="payment-icon">
          <image :src="Config.API_HOST+'/imgs/微信支付.png'" mode="widthFix"></image>
        </view>
        <view class="payment-name">微信支付</view>
        <view class="selected-icon">
			 <radio :checked="isflage" @click="changew"/>
        </view>
      </view>
      <view class="payment-option">
        <view class="payment-icon">
          <image :src="Config.API_HOST+'/imgs/银联-支付.png'" mode="widthFix"></image>
        </view>
        <view class="payment-name">银联支付</view>
        <view class="selected-icon">
			<radio :checked="isflagex" @click="changex"/>
        </view>
      </view>
    </view>

    <!-- 立即支付按钮 -->
    <view class="footer">
      <button class="pay-button" @click="pay()">立即支付{{Number(total).toFixed(2)}}元</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Config from "@/config.js";
import { onLoad } from '@dcloudio/uni-app';

// 初始化剩余时间为 30 分钟
const remainingTime = ref('30:00');
const isflage=ref(true) 
const isflagex=ref(false) 
const changew=()=>{
	isflage.value=true;
	isflagex.value=false
}
const changex=()=>{
	isflage.value=false;
	isflagex.value=true
}
// 倒计时函数
let timer;
const total=ref()
const shopname=ref()
const ids=ref([])
const startCountdown = () => {
  let minutes = 30;
  let seconds = 0;

  timer = setInterval(() => {
    if (seconds > 0) {
      seconds--;
    } else {
      if (minutes > 0) {
        minutes--;
        seconds = 59;
      } else {
        clearInterval(timer);
      }
    }
    remainingTime.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }, 1000);
};


onLoad((options)=>{
	uni.request({
		url:Config.API_HOST+"/order/?id="+options.id,
		success: (res) => {
			total.value=res.data[0].totalPrice
			shopname.value=res.data[0].shopname
			ids.value=res.data[0].products
		}
	})
})

// 组件挂载时启动倒计时
onMounted(() => {
  startCountdown();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});
const pay = () => {
  // 显示“加载中”提示，2秒后自动消失
  uni.showToast({
    title: "加载中",
    icon: "loading",
  });

  // 等待2秒后显示“支付成功”提示
  setTimeout(() => {
    uni.showToast({
      title: "支付成功",
      icon: "success",
    });

   ids.value.forEach((element) => {
     uni.request({
       url: `${Config.API_HOST}/carts/${element.id}`,
       method: "DELETE",
       success: (res) => {
         // 删除成功后跳转到订单页面
         uni.switchTab({
           url: "/pages/order/index",
         });
       },
       fail: (err) => {
         console.error("删除购物车失败:", err);
       },
     });
   });
   
  }, 1500); 
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 20rpx;
}

.header {
  background-color: #007AFF;
  color: #fff;
  padding: 30rpx;
  position: relative;
}

.back-arrow {
  position: absolute;
  left: 20rpx;
  top: 30rpx;
}

.back-arrow image {
  width: 40rpx;
  height: 40rpx;
}

.header-content {
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.merchant {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.amount {
  font-size: 60rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.time-remaining {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

.payment-methods {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.payment-option:last-child {
  border-bottom: none;
}

.payment-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.payment-icon image {
  width: 100%;
  height: 100%;
}

.payment-name {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.selected-icon {
  width: 40rpx;
  height: 40rpx;
}

.selected-icon image {
  width: 100%;
  height: 100%;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.pay-button {
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx;
  border-radius: 50rpx;
  border: none;
  width: 100%;
}
</style>